<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时数据</title>
    <style>
        * {
            margin: 0 0;
            padding: 0 0;
        }

        h1 {
            margin: 10px 0;
        }

        table {
            width: 90%;
        }

        tr {
            height: 60px;
        }

        th {
            margin-right: 50px;
        }

        .container {
            width: 100%;
            text-align: center;
            align-content: center;
        }

        #comment-table {
            margin: 0 auto;
            text-align: left;
        }

        #comment-table table {
            width: 100%;
            margin: 15px 0
        }

        #comment-table th {
            background-color: #93DAFF;
            background: -o-linear-gradient(90deg, #93DAFF, #c1e9fe);
            background: -moz-linear-gradient(center top, #93DAFF 5%, #c1e9fe 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #93DAFF), color-stop(1, #c1e9fe));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93DAFF', endColorstr='#c1e9fe');
            color: #000000
        }

        #comment-table, #comment-table th, #comment-table td {
            font-size: 0.95em;
            text-align: center;
            padding: 4px;
            border-bottom: 1px solid #efefef;
            border-collapse: collapse
        }

        #comment-table tr:nth-child(odd) {
            background-color: #dbf2fe;
            background: -o-linear-gradient(90deg, #dbf2fe, #f7fcfe);
            background: -moz-linear-gradient(center top, #dbf2fe 5%, #f7fcfe 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbf2fe), color-stop(1, #f7fcfe));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbf2fe', endColorstr='#f7fcfe');
        }

        #comment-table tr:nth-child(even) {
            background-color: #fdfdfd;
        }


        #song-id {
            width: 7%;
        }
        #song-name {
            width: 17%;
        }
        #comment-id{
            width: 7%;
        }
        #nickname {
            width: 7%;
        }
        #content {
            width: 60%;
        }
    </style>
</head>
<body>
<div class="container">
    <h1> 实时数据 </h1>
    <table id="comment-table">
        <thead id="comment-head">
        <tr>
            <th id="song-id">SongID</th>
            <th id="song-name">SongName</th>
            <th id="comment-id">CommentID</th>
            <th id="nickname">NickName</th>
            <!--<th>Avatar</th>-->
            <th id="content">Content</th>
        </tr>
        </thead>
        <tbody id="comment-body">

        </tbody>
    </table>
</div>


<script type="text/javascript">
    let sock = null;
    let wsuri = "ws://distr.moyrn.com/comment";

    window.onload = function () {

        console.log("onload");

        sock = new WebSocket(wsuri);

        sock.onopen = function () {
            console.log("connected to " + wsuri);
        };

        sock.onclose = function (e) {
            console.log("connection closed (" + e.code + ")");
        };

        sock.onmessage = function (e) {
            // JSON.parse(e);
            // console.log(e.data);
            // e.toString();
            // console.log(e.data);
            data = JSON.parse(e.data);
            for (i=0;i<e.data.length;i++) {
                console.log(data[i].song_id,data[i].song,data[i].commentId,data[i].nickname,data[i].avatarUrl,data[i].content);
                prepend(data[i].song_id,data[i].song,data[i].commentId,data[i].nickname,data[i].avatarUrl,data[i].content)
            }

            // let commentHead = document.getElementById("comment-head")
            // commentHead.appendChild(e.data)
        };

    };

    commentHead = document.getElementById("comment-body");

    function prepend(_songID,_song,_commentID,_nickname,_avatar,_content) {
        let songID = document.createElement('td');
        songID.textContent = _songID;
        let song = document.createElement('td');
        song.textContent = _song;
        let tr = document.createElement('tr');
        let commentID = document.createElement('td');
        commentID.textContent = _commentID;
        let nickname = document.createElement('td');
        nickname.textContent = _nickname;
        // let avatar = document.createElement('td');
        // todo: 添加图片
        // img = document.createElement('img');
        // img.style.borderRadius="8px";
        // img.src=_avatar;
        // img.height=50;
        // img.width=50;
        // img.style.margin = "0 20px";
        // avatar.appendChild(img);
        // avatar.textContent = _avatar;

        let content = document.createElement('td');
        content.style.textAlign = "left";
        content.textContent = _content;
        tr.appendChild(songID);
        tr.appendChild(song);
        tr.appendChild(commentID);
        tr.appendChild(nickname);
        // tr.appendChild(avatar);
        tr.appendChild(content);
        commentHead.prepend(tr);

        if (commentHead.childElementCount > 40) {
            commentHead.childNodes[commentHead.childElementCount - 1].remove()
        }
    }



    // function send() {
    //     let msg = document.getElementById('message').value;
    //     sock.send(msg);
    // }
    // <form>
    //
    //     <p>
    //
    //         <label for="message">Message:</label><input id="message" type="text" value="Hello, world!">
    //
    //     </p>
    //
    // </form>
    //
    // <button onclick="send();">Send Message</button>

</script>
</body>
</html>